{extend name="default/layout" /}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

        <!-- 侧边栏导航 -->
        {assign name="current" value="order" /}
        {include file="default/components/user-sidebar" /}

        <!-- 主要内容区域 -->
        <div class="lg:col-span-3">
            <!-- 页面标题 -->
            <div class="bg-white rounded-t p-4  border-b border-gray-200">
                <h1 class="text-xl font-bold text-gray-800">我的订单</h1>
            </div>

            <!-- 订单列表 -->
            {if $orders}
            <div class="bg-white rounded-b  overflow-hidden">
                <div class="divide-y">
                    {volist name="orders" id="order"}
                    <div class="p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center justify-between">
                            <!-- 左侧信息 -->
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-3 mb-2">
                                    <span class="font-mono text-sm text-gray-800">{$order.trade_no}</span>
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {if $order.status == 0}bg-orange-100 text-orange-800
                                        {elseif $order.status == 1}bg-green-100 text-green-800
                                        {elseif $order.status == 2}bg-blue-100 text-blue-800
                                        {else}bg-red-100 text-red-800{/if}">
                                        {if $order.status == 0}待支付
                                        {elseif $order.status == 1}已支付
                                        {elseif $order.status == 2}已关闭
                                        {else}已取消{/if}
                                    </span>
                                </div>
                                <h3 class="font-medium text-gray-800 mb-1 truncate">{$order.goods_name}</h3>
                                <p class="text-sm text-gray-500">{$order.create_time|date='Y-m-d H:i:s'}</p>
                            </div>

                            <!-- 右侧价格和操作 -->
                            <div class="flex items-center gap-4 ml-4">
                                <div class="text-right">
                                    <div class="text-lg font-bold text-blue-500">
                                        {:conf('site_currency_symbol')}{$order.total_price}
                                    </div>
                                </div>
                                <div class="flex gap-2">
                                    {if $order.status == 0}
                                    <a href="/gopay?trade_no={$order.trade_no}" target="_blank"
                                        class="px-3 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 transition-colors">
                                        支付
                                    </a>
                                    <button onclick="cancelOrder('{$order.trade_no}')"
                                        class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50 transition-colors">
                                        取消
                                    </button>
                                    {elseif $order.status == 1}
                                    <a href="{:_url_('goods/detail', ['id' => $order.goods_id])}?trade_no={$order.trade_no}" target="_blank"
                                        class="px-3 py-1 bg-green-500 text-white rounded text-sm hover:bg-green-600 transition-colors">
                                        查看
                                    </a>
                                    {/if}
                                </div>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>

            <!-- 分页 -->
            {if $total > $per_page}
            <div class="flex justify-center">
                <nav class="flex items-center space-x-2">
                    {if $current_page > 1}
                    <a href="?page={$current_page-1}"
                        class="px-3 py-2 border rounded-sm text-gray-500 hover:text-blue-500 hover:border-blue-500 transition-colors">
                        上一页
                    </a>
                    {/if}

                    {php}
                    $total_pages = ceil($total / $per_page);
                    $start_page = max(1, $current_page - 2);
                    $end_page = min($total_pages, $current_page + 2);
                    {/php}

                    {for start="$start_page" end="$end_page"}
                    {if $i == $current_page}
                    <span class="px-3 py-2 bg-blue-500 text-white rounded-sm">{$i}</span>
                    {else}
                    <a href="?page={$i}"
                        class="px-3 py-2 border rounded-sm text-gray-500 hover:text-blue-500 hover:border-blue-500 transition-colors">
                        {$i}
                    </a>
                    {/if}
                    {/for}

                    {if $current_page < $total_pages} <a href="?page={$current_page+1}"
                        class="px-3 py-2 border rounded-sm text-gray-500 hover:text-blue-500 hover:border-blue-500 transition-colors">
                        下一页
                        </a>
                        {/if}
                </nav>
            </div>
            {/if}

            {else}
            <!-- 无订单提示 -->
            <div class="bg-white rounded-b p-12  text-center">
                <div class="text-gray-500">
                    <i class="fas fa-shopping-bag text-6xl mb-6"></i>
                    <h3 class="text-xl font-medium mb-2">暂无订单</h3>
                    <p class="mb-6">您还没有任何订单记录</p>
                    <a href="/"
                        class="inline-block px-6 py-3 bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors">
                        去购物
                    </a>
                </div>
            </div>
            {/if}
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    // 取消订单
    function cancelOrder(tradeNo) {
        if (typeof showConfirm === 'function') {
            showConfirm('确定要取消这个订单吗？', () => {
                $.ajax({
                    url: '/user/cancelOrder',
                    type: 'POST',
                    data: {
                        trade_no: tradeNo
                    },
                    success: function(response) {
                        if (response.code === 1) {
                            showSuccess('订单已取消');
                            setTimeout(() => location.reload(), 1500);
                        } else {
                            showError(response.msg || '取消失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        showError('网络错误');
                    }
                });
            });
        } else if (confirm('确定要取消这个订单吗？')) {
            $.ajax({
                url: '/user/cancelOrder',
                type: 'POST',
                data: {
                    trade_no: tradeNo
                },
                success: function(response) {
                    if (response.code === 1) {
                        showSuccess('订单已取消');
                        setTimeout(() => location.reload(), 1500);
                    } else {
                        showError(response.msg || '取消失败');
                    }
                },
                error: function(xhr, status, error) {
                    showError('网络错误');
                }
            });
        }
    }
</script>
{/block}